<template>
  <div class="app-container">

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        {{courseInfo.title}}
      </el-form-item>

      <el-form-item label="课程类别">
        {{courseInfo.subjectLevelOne}}-{{courseInfo.subjectLevelTwo}}
      </el-form-item>

      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        {{courseInfo.teacherName}}
      </el-form-item>

      <el-form-item label="总课时">
        {{courseInfo.lessonNum}}
      </el-form-item>

      <!-- 课程简介-->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description" />
      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="课程封面">
        <img
          v-if="courseInfo.cover"
          style="width: 400px; height: 200px"
          :src="courseInfo.cover"
          class="avatar"
        />
      </el-form-item>

      <el-form-item label="课程价格">
        {{courseInfo.price}}元
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import courseApi from '@/api/edu/course'

export default {
  components: { Tinymce },
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API,
      courseInfo: null //课程信息
    }
  },

  created() {
    console.log('info created')
    this.init()
  },

  methods: {
    init() {
      const id = this.$route.params.id
      console.log(id)
      // 根据id获取课程基本信息
      this.fetchCourseInfoById(id)
    },

    fetchCourseInfoById(id) {
      courseApi.getCourseInfoById(id).then(response => {
        this.courseInfo = response.data.item
        console.log(this.courseInfo)
      })
    }
  }
}
</script>

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>
